<script setup>
import HubItem from "@/components/hub/HubItem.vue"
import { onMounted, ref, computed } from "vue";
import { DocumentAdd } from '@element-plus/icons-vue'
import service from "@/utils/request.utils";
import { ElMessage } from "element-plus";
import { RESPONSE_MESSAGE } from '@/constant/response';

const hubList = ref([])
const groups = ref([])
const group = ref()
const drawer = ref(false)
const hubForm = ref({
    "name": "",
    "description": ""
})

// hubItem = {
//      id: "",
//     group_id: "",      
//     group_name: "",
//     hub_name:"".
//     nickname: "",
//     description: "",
//     create_at: "",
// }

onMounted(async () => {
    let res = await service.post("/group/querys")
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: RESPONSE_MESSAGE[res.data.code],
            type: "warning"
        })
        return
    } else {
        groups.value = res.data.data
        // ElMessage({
        //     message: RESPONSE_MESSAGE[res.data.code],
        //     type: "success"
        // })
        return
    }
})

async function queryHubs() {
    let res = await service.post("/hub/querys", { "groupId": group.value.group_id })
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: RESPONSE_MESSAGE[res.data.code],
            type: "warning"
        })
        return
    } else {
        hubList.value = res.data.data
        console.log(hubList.value)
        return
    }
}

const selectGroup = computed({
    get() {
        if (group.value != null)
            return group.value
    },
    // 需要监听数据变化
    async set(newValue) {
        console.log(newValue)
        group.value = newValue
        queryHubs()
    }
})

function addDocumentFunc() {
    drawer.value = true
}

async function createHub() {
    if (hubForm.value.name.length == 0) {
        ElMessage.warning("知识库名不能为空")
        return;
    }
    if (hubForm.value.name.length > 10) {
        ElMessage.warning("知识库名过长")
        return;
    }
    if (hubForm.value.description.lenght == 0) {
        ElMessage.warning("知识描述不能为空")
        return;
    }
    if (hubForm.value.description.lenght > 1023) {
        ElMessage.warning("知识描述不能超过1千字符")
        return;
    }



    let data = {
        groupId: group.value.group_id,
        hubName: hubForm.value.name,
        description: hubForm.value.description
    }
    console.log(data)
    let res = await service.post("/hub/create", data)
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '操作失败: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        console.log(res.data)
        ElMessage({
            message: RESPONSE_MESSAGE[res.data.code],
            type: "warning"
        })
        return
    } else {
        groups.value = res.data.data
        ElMessage.success("创建知识库成功")
        drawer.value = false
        queryHubs()
        return
    }

}

</script>
<template>
    <el-drawer v-model="drawer" title="添加数据源" :with-header="true">
        <div id="drawer">
            <div style="font-size: 1.5em; font-weight: 700; color:black">群组：<txt style="font-style: italic; color: gray">
                    {{ group.group_name }}
                </txt>
            </div>

            <div style="margin-top: 2em;">
                <el-form v-model="hubForm">
                    <el-form-item label="请输入知识库名">
                        <el-input v-model="hubForm.name" />
                    </el-form-item>
                    <el-form-item label="请输入知识描述">
                        <el-input v-model="hubForm.description" type="textarea" />
                    </el-form-item>
                </el-form>
                <el-button style="margin: auto" type="success" @click="createHub">
                    创建
                </el-button>

            </div>
        </div>
    </el-drawer>
    <div id="selectGroup">
        <el-form-item label="选取群组">
            <el-select v-model="selectGroup" placeholder="Select" size="large" style="width: 240px">
                <el-option v-for="group in groups" :key="group.group_id" :label="group.group_name" :value="group" />
            </el-select>
        </el-form-item>
    </div>
    <div id="outer">
        <HubItem id="hubItem" v-for="hubItem in hubList" key="hubItem.id" :hubItem="hubItem" />
        <div id="addHub" v-if="group != null && group.permission > 1">
            <el-button type="success" @click="addDocumentFunc" :icon="DocumentAdd"> 添加知识库</el-button>
        </div>
    </div>
</template>
<style scoped>
#outer {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    flex-flow: row wrap;
    font-size: 3em;
    font-weight: 900;
    overflow: auto;
}

#hubItem {
    width: 30%;
    height: 30%;
    margin: 1.5%;
    border: 2px rgb(168, 164, 164) solid;
    border-radius: 5px;
}

#addHub {
    position: fixed;
    z-index: 999;
    bottom: 1em;
    right: 1em;
}

#selectGroup {
    z-index: 999;
    margin: auto;
    width: fit-content;
    padding-top: 1em;
    font-size: small;
}
</style>